<template>
  <!-- Vue3组件中的模板结构可以没有根标签 -->
  <!-- 一个人的信息 -->

  <!-- 
      {{name}}其中Vue3在解析到这块代码的时候，当发现name是一个ref引用对象的时候，
      自动将.value进行添加了，所以开发的过程中可以省略.value的写法。
  -->
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>工资种类：{{job.type}}</h2>
  <h2>工资薪水：{{job.salary}}</h2>
  <button @click="changeInfo()">修改人的信息</button>

</template>

<script>
  // 引入一个ref 函数。
  import { ref } from 'vue';

  export default {
    name: 'App',

    // setup 配置项不省略写法
    // setup:function() {

    // }

    // setup 配置项省略写法 
    // 组件中所用到的：数据、方法等等，均要配置在setup中。
    setup() {
      // 此处只是测试一下setup，暂时不考虑响应式的问题。

      // 数据
      let name = ref('张三');
      let age = ref(18);
      let job = ref({
        type: '前端工程师',
        salary: '30k'
      });

      // 方法
      function changeInfo() {
        name.value = '李四',
        age.value = 28,
        console.log(name, age);

        job.value.type = 'UI设计工程师',
        job.value.salary = '50k';
        console.log(job);
      }

      // 返回一个对象，常用
      // 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
      return {
        name: name,
        age: age,
        changeInfo,
        job: job,
      }
    }
  }
</script>